import React,{useState,useCallback,useEffect} from 'react'
import {useLocation,useHistory} from 'react-router-dom'
import {DetailWrapper,SwiperDiv} from './styledDetail'
import left from '@/assets/images/left.png'
import home from '@/assets/images/home.png'
import Navbar from '@/components/Navbar/Navbar'
import line from '@/assets/images/line.png'
import DetailSwiper from './Swiper'

export default function Detail() {
    const {state} =useLocation()
    const history=useHistory()
    const [isShow,setIsShow]=useState(false)
    const [isBuy,setIsBuy]=useState(false)
    const [border,setBorder]=useState()
    const [price,setPrice]=useState("--")
    const [good,setGood]=useState('请选择商品')
    const handleBuyClick=useCallback(
        ()=>{
            setIsShow(true)
        }
    )

    
    const handleBackClick=useCallback(
        (num)=>{
            return()=>{
                if(num===1){
                    history.goBack()
                }else{
                    history.push('/home')
                }
            }   
        }
    )
    const handleDel=useCallback(
        ()=>{
            setIsShow(false)
        }
    )
    const handleactive=useCallback(
        (index,size,price)=>{
            return (e)=>{
                setBorder(index)
                setGood(size)
                setPrice(price)
                setIsBuy(true)
         }
        }
 
    )

    const goods=[{'size':41,'price':399},
                {'size':42,'price':499},
                {'size':42.5,'price':599},
                {'size':43,'price':369},
                {'size':44,'price':389}
            ] 
    const handleBuy=useCallback(
        ()=>{
            history.push('/order',{
                product:{...state.product,
                price:price,
                size:good}
            })
        }
    )

    
    return (
        <DetailWrapper>
             <Navbar
                color='#F8F8F8'
            >
            </Navbar>
            <div className='top'>
                <ul className='nav'
                >
                    <li onClick={handleBackClick(1)}><img src={left} alt="" /></li>
                    <li><img src={line} alt="" /></li>
                    <li onClick={handleBackClick(3)}><img src={home} alt="" /></li>
                </ul>
                <span>商品详情</span>
            </div>
            <div className='content'>
                <DetailSwiper
                img={state.product.logoUrl}
                ></DetailSwiper>

                <div className='pro_desc'>
                    <h1>
                        {state.product.title}
                    </h1>
                    <p>￥{state.product.price/100}</p>
                </div>
                <div className='line'></div>
                <div className='brand'>
                    <p>Nike</p>
                    <p>
                        <span>175665464人关注</span>
                        |
                        <span>36370款商品</span>
                    </p>
                </div>
                <div className='line'></div>
                <div className='recommend'>
                    <h1>推荐</h1>

                </div>
                
            </div>
            <div className='buy'>
                <button
                onClick={handleBuyClick}
                >立即购买</button>
            </div>
            <div className={isShow?'buydetail':'active'}>
                <span className='del'
                onClick={handleDel}
                >
                    X
                </span>
                <div className='good'>
                    <div className='good_img'>
                        <img src={state.product.logoUrl} alt="" />
                    </div>
                    <div className='good_info'>
                        <p>￥<span>{price}</span></p>
                        <p>{good}</p>
                    </div>
                </div>
                <div className='size'>
                    <ul>
                      {
                          goods.map((item,index)=>{
                              return(
                                <li 
                                onClick={handleactive(index,item.size,item.price)}
                                className={border===index?'aa':''}
                                key={index}
                                >
                                    <p>￥{item.size}</p>
                                    <p>{item.price}</p>
                                </li>
                              )
                          })
                      }
                       
                    </ul>
                </div>
                <div className={isBuy?'buy':'active'}>
                    <button
                        onClick={handleBuy}
                    >￥{price}|约6天到</button>
                </div>
            </div>
           
        </DetailWrapper>
    )
}
